<template>
  <div class="regular">
    <van-nav-bar
      title="常购清单"
      
      left-arrow
      @click-left="backUp"
    />
     <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
      <van-card
        v-for="item in goods"
        :key="item.id"
        :title="item.title"
        :desc="item.desc"
        :price="`${formatPrice(item.price)}/kg`"
        :thumb="item.thumb"
      >
        <div slot="footer" >
          加购物车
        </div>
        <div slot="tags" class="delete">
          <van-icon name="delete"></van-icon>
        </div>
      </van-card>
      </van-list>
  </div>
</template>

<script>
import { NavBar, Card, SubmitBar, Toast, 
Icon, List } from 'vant';

export default {
  components: {
    [Card.name]: Card,
    [SubmitBar.name]: SubmitBar,
    [NavBar.name]:NavBar,
    [Icon.name]:Icon,
    [Toast.name]:Toast,
    [List.name]:List,
  },

  data() {
    return {
      goods: [
        {
        id: '1',
        title: '澳洲牛腩',
        desc: '9kg/箱',
        price: 200,
        num: 1,
        thumb: 'https://img.yzcdn.cn/vant/apple-1.png'
        },
        {
          id: '2',
          title: '进口红虾',
          desc: '8kg每箱',
          price: 690,
          num: 1,
          thumb: 'https://img.yzcdn.cn/vant/apple-1.png'
        },
        {
          id: '3',
          title: '内蒙古羊腿',
          desc: '10kg每箱',
          price: 2680,
          num: 1,
          thumb: 'https://img.yzcdn.cn/vant/apple-1.png'
        },
        {
        id: '4',
        title: '澳洲牛腩',
        desc: '9kg/箱',
        price: 200,
        num: 1,
        thumb: 'https://img.yzcdn.cn/vant/apple-1.png'
        },
        {
          id: '5',
          title: '进口红虾',
          desc: '8kg每箱',
          price: 690,
          num: 1,
          thumb: 'https://img.yzcdn.cn/vant/apple-1.png'
        },
        {
          id: '6',
          title: '内蒙古羊腿',
          desc: '10kg每箱',
          price: 2680,
          num: 1,
          thumb: 'https://img.yzcdn.cn/vant/apple-1.png'
        },
        {
        id: '7',
        title: '澳洲牛腩',
        desc: '9kg/箱',
        price: 200,
        num: 1,
        thumb: 'https://img.yzcdn.cn/vant/apple-1.png'
        },
        {
          id: '8',
          title: '进口红虾',
          desc: '8kg每箱',
          price: 690,
          num: 1,
          thumb: 'https://img.yzcdn.cn/vant/apple-1.png'
        },
        {
          id: '9',
          title: '内蒙古羊腿',
          desc: '10kg每箱',
          price: 2680,
          num: 1,
          thumb: 'https://img.yzcdn.cn/vant/apple-1.png'
        },
        {
        id: '10',
        title: '澳洲牛腩',
        desc: '9kg/箱',
        price: 200,
        num: 1,
        thumb: 'https://img.yzcdn.cn/vant/apple-1.png'
        },
        {
          id: '11',
          title: '进口红虾',
          desc: '8kg每箱',
          price: 690,
          num: 1,
          thumb: 'https://img.yzcdn.cn/vant/apple-1.png'
        },
        {
          id: '12',
          title: '内蒙古羊腿',
          desc: '10kg每箱',
          price: 2680,
          num: 1,
          thumb: 'https://img.yzcdn.cn/vant/apple-1.png'
        }
        ],
        list: [],
        loading: false,
        finished: false
    };
  },
  methods: {
    formatPrice(price) {
      return (price / 100).toFixed(2);
    },

    onLoad() {
      // 异步更新数据
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }
        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= this.goods.length) {
          this.finished = true;
        }
      }, 500);
    },
    backUp() {
      this.$router.go(-1);
    }
  }
};
</script>

<style lang="less" scoped>
@import '~style/common.less';
 @import '~style/list.less';
 .regular {
   .van-card {
   margin-top: 2px;
  //  margin-bottom: -5px;
   box-sizing: border-box;
    // border: 1px solid red;
    &__footer {
    border: 1Px solid #ccc;
    border-radius: 24px;
    height: 24px;
    line-height: 24px;
    color: @fontColorH3;
    text-align: center;
    width: 60px;
  }
   }
  
 }
</style>

